/**
 * @authors tanqichao
 * @date    2017-06-07 13:59:27
 * @module  添加创意包
 */
import { connect } from 'dva';
import { createForm } from 'rc-form';
import React, { Component } from 'react';
import { Modal, Table, Switch, Input, Row, Col, Button, message, Icon } from 'antd';
import Styles from '../createPlan/index.less';
import { pageSize } from '../../../constants';

class PacketModal extends Component {
  constructor (props) {
    super(props);
    this.state = {
      visible: false,
      title: '',
      list: [],
      page: 1
    }
  }

  // 创意添加
  add = () => {
    const { fetchPacket, type } = this.props;
    if (!type) {
      message.error('请选择广告类型', 3)
      return false
    }
    fetchPacket(type)
    this.setState({
      visible: true
    })
  }

  // 取消操作
  cancel = () => {
    this.setState({ visible: false })
  }

  // 切换
  action = (id, checked) => {
    const crGrpIds =  [].concat(this.props.crGrpIds)
    // console.log(crGrpIds)
    if (checked) {
      crGrpIds.push(id)
    } else {
      crGrpIds.map((item, index) => {
        if (item === id) {
          crGrpIds.splice(index, 1)
        }
      })
    }
    // console.log(crGrpIds)
    this.props.setCrGrpIds(crGrpIds)
  }

  // 保存创意方案
  save = () => {
    this.props.onComplete()
    this.setState({ visible: false })
  }

  // search
  search = () => {
    const { search } = this.props,
          keyWord = this.state.keyWord;

    search(keyWord);
  }

  // 搜索创意标题
  setKeyWord = (e) => {
    this.setState({ keyWord: e.target.value });
  }

  // 分页
  handlePage = () => {

  }

  renderTable = () => {
    const { packetList, crGrpIds } = this.props;
    const columns = [{
      title: '创意包ID',
      dataIndex: 'id',
      key: 'id'
    }, {
      title: '创意包名称',
      dataIndex: 'title',
      key: 'title'
    }, {
      title: '曝光量	',
      dataIndex: 'exposureCount',
      key: 'exposureCount'
    }, {
      title: '点击量',
      dataIndex: 'clickCount',
      key: 'clickCount'
    }, {
      title: '点击率',
      dataIndex: 'clickRate',
      key: 'clickRate'
    }, {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      render: (text, record) => {
        let status = 0;
        crGrpIds.map((item) => {
          if (item === record.id) {
            status = 1
            return status
          }
        })
        const content = (
          <Switch
		      	checked={status}
		        checkedChildren={'已添加'}
		        unCheckedChildren={'添加'}
		        onChange={this.action.bind(this, record.id)}
		      />
        )
        return content
      }
    }];
    const pageConfig = {
      className: "ant-table-pagination",
      total: this.props.totalCount,
      onChange: this.handlePage,
      current: this.state.page,
      pageSize: pageSize,
    };
    return (
      <Table
        className={Styles.pageList}
        rowKey={record => record.id}
        dataSource={packetList}
        columns={columns}
      />
    )
  }

  render () {
    const { children, packetList } = this.props;
    return (
      <span>
        <div onClick={this.add}>
          <Icon type="plus" className={Styles.iconPlus} />
          <div>添加创意包</div>
        </div>
        <Modal
          title="选择创意包"
          okText="保存"
          width={1000}
          visible={this.state.visible}
          onOk={this.save}
          maskClosable={false}
          onCancel={this.cancel}
          footer={
            <div className={Styles.footer}>
              <Button type="primary" size="large" onClick={this.cancel} className={Styles.cancel}>取消</Button>
              <Button type="primary" size="large" onClick={this.save} className={Styles.save}>保存</Button>
            </div>
          }
        >
          <div className={Styles.editPlan}>
            <Row>
              <Col span={7}>
                <Input className={Styles.search} placeholder="请输入搜索内容" value={this.state.keyWord} onChange={this.setKeyWord} />
              </Col>
              <Col span={2}>
                <Button type="primary" size="large" onClick={this.search} className={Styles.searchBtn}>查询</Button>
              </Col>
            </Row>
            {packetList && packetList.length > 0 && this.renderTable()}
          </div>
        </Modal>
      </span>
    )
  }
};
export default PacketModal;
